<template>
  <div class="app-container">
    <div class="filter-container">

<!--      <span>外租单位：</span>-->
      <el-select filterable v-model="query.rent_unit_id" placeholder="外租单位" class="filter-item" >
        <el-option :label="'全部'" :value="0" ></el-option>
        <el-option v-for="unit in unitList" :label="unit.unit_name" :value="unit.id" ></el-option>
      </el-select>

<!--      <span>车牌号：</span>-->
      <el-select filterable v-model="query.car_id" placeholder="车牌号" class="filter-item" >
        <el-option :label="'全部'" :value="0" ></el-option>
        <el-option v-for="car in allCarLst" :label="car.car_no" :value="car.id" ></el-option>
      </el-select>
      <el-select filterable v-model="query.status" placeholder="状态" class="filter-item" >
        <el-option :label="'全部'" :value="0" ></el-option>
        <el-option :label="'进行中'" :value="3" ></el-option>
        <el-option :label="'已完成'" :value="4" ></el-option>
      </el-select>

      <el-button style="margin-left: 10px" @click="queryRecords" type="primary" class="filter-item">查询</el-button>
      <el-button @click="reload" type="danger" class="filter-item">刷新</el-button>
      <el-button @click="openAddDialog" type="primary" class="filter-item">+派车单</el-button>
<!--      <el-button @click="handleDelete(undefined,undefined)" type="primary" class="filter-item">批量取消</el-button>-->
<!--      <el-button @click="handleStatus(undefined,undefined,2)" type="primary" class="filter-item">批量下架</el-button>-->
<!--      <el-button @click="handleTop(undefined,undefined,1)" type="primary" class="filter-item">批量置顶</el-button>-->
    </div>

      <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      v-horizontal-scroll="'always'"
      @selection-change="handleSelectionChange"
    >
<!--    <el-table-column type="selection" min-width="55" />-->
    <el-table-column prop="id" label="ID" min-width="80" />
        <el-table-column prop="rent_unit_name" label="外租单位" min-width="150" />
        <el-table-column prop="car_nos" label="车牌号" min-width="200" />
    <el-table-column prop="status_name" label="状态" min-width="80" />
    <el-table-column prop="rent_time" label="外租时间" min-width="150" />
    <el-table-column prop="back_time" label="收车时间" min-width="150" />
    <el-table-column prop="use_way" label="用途" min-width="150" />
    <el-table-column prop="beizhu" label="备注" min-width="150" />
    <el-table-column prop="created_at" label="创建时间" min-width="150" />
        <el-table-column fixed="right" label="操作" min-width="130">
          <template slot-scope="scope">
            <el-button v-show="scope.row.status==3" size="mini" type="text" @click="handleBackCar(scope.$index, scope.row)">收车</el-button>
            <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">取消</el-button>
          </template>
        </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 100, 200]"
      :page-size="pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

    <el-dialog :title="isAdd?'派车':'编辑'" v-loading="loading" :visible.sync="carDialogFormVisible">

      <el-form ref="form" :model="form" label-width="100px">

        <el-form-item  label="选择车辆：">
          <el-select v-if="isAdd" filterable multiple v-model="form.select_car_ids" placeholder="请选择车辆">
            <el-option v-for="car in freeCarLst" :label="car.car_no" :value="car.id"></el-option>
          </el-select>
          <el-select v-else filterable multiple v-model="form.select_car_ids" placeholder="请选择车辆">
            <el-option v-for="car in allCarLst" :label="car.car_no" :value="car.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="外租单位：">
          <el-select filterable v-model="form.rent_unit_id" placeholder="外租单位">
            <el-option v-for="item in unitList" :label="item.unit_name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="派车时间：">
          <el-date-picker
            v-model="form.rent_time"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>

<!--        <el-form-item label="还车时间">
          <el-date-picker
            v-model="form.back_time"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss" >
          </el-date-picker>
        </el-form-item>-->

        <el-form-item label="用途：">
          <el-input type="textarea" :rows="3" v-model="form.use_way"></el-input>
        </el-form-item>

        <el-form-item label="备注：">
          <el-input type="textarea" :rows="3"  v-model="form.beizhu"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit"  type="primary">{{isAdd?'创 建':'修 改'}}</el-button>
          <el-button @click="closeAddDialog" >取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="收车" :visible.sync="backDialogFormVisible">

      <el-descriptions :column="1"  title="订单信息">
        <el-descriptions-item  size="medium" label="外租单位">{{orderInfo.rent_unit_name}}</el-descriptions-item>
        <el-descriptions-item  size="medium" label="车辆">
          <el-tag style="margin-left: 5px" v-for="carno in orderInfo.car_nos">{{carno}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item  size="medium" label="外出时间">{{orderInfo.rent_time}}</el-descriptions-item>
        <el-descriptions-item  size="medium" label="用途">{{orderInfo.use_way}}</el-descriptions-item>
        <el-descriptions-item  size="medium" label="备注">{{orderInfo.beizhu}}</el-descriptions-item>
      </el-descriptions>

      <div>
        <span style="color: #409EFF" >收车时间：</span>
        <el-date-picker
          v-model="orderInfo.back_time"
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </div>


      <span slot="footer" class="dialog-footer">
        <el-button @click="backCar" type="primary" >收 车</el-button>
        <el-button @click="closeBackDialog">取 消</el-button>
      </span>
    </el-dialog>
  </div>



</template>

<script>

import { myGet, myPost,getDateStr } from '@/utils/myUtils'

const urlAdvertLst = '/guard/order/lst'
const urlAdvertAdd = '/guard/order/add'
const urlAdvertDel = '/guard/order/del'
const urlAdvertChange = '/guard/order/change'
const urlAdvertDetail = '/guard/order/detail'
const urlFreeCarLst = '/guard/order/getFreeCarLst'
const urlAllCarLst = '/guard/order/getAllCarLst'
const urlBackCar = '/guard/order/backCar'
const urlUnitNameLst = '/guard/rentunit/lst?all=1'

export default {

    data() {
      return {
        selectId:[],
        loading:false,
        host:process.env.VUE_APP_HOST,
        list:[],
        isAdd:true,
        backDialogFormVisible:false,
        carDialogFormVisible:false,
        listLoading:false,
        freeCarLst:[],
        allCarLst:[],
        unitList:[],
        form:{
          order_id:0,
          rent_unit_id:'',
          select_car_ids:[],
          rent_time:getDateStr(0) +" 08:00:00",
          use_way:'',
          back_time:'',
          beizhu:''
        },
        orderInfo:{
          order_id:'',
          rent_unit_name:'',
          car_nos:[],
          rent_time:'',
          use_way:'',
          back_time:'',
          beizhu:''
        },
        query:{
          car_id:'',
          rent_unit_id:'',
          status:0,
        },
        pagination:{
          page:1,
          pageSize:20,
          total:0,
        },
        fileList:[],
        upload:{
          module:'advert',
        }
      }
    },
    methods: {

      handleBackCar(index,row){
        this.backDialogFormVisible = true
        Object.assign(this.$data.orderInfo,this.$options.data().orderInfo)
        let id = row.id
        myGet(urlAdvertDetail,{id}).then(res=>{
          if(res.status){
            this.orderInfo.car_nos = []
            let order = res.data.records;
            order.car_nos.split(",").forEach(carno=>{
              this.orderInfo.car_nos.push(carno)
            })
            this.orderInfo.order_id = order.id
            this.orderInfo.rent_unit_name = order.rent_unit_name
            this.orderInfo.rent_time = order.rent_time
            this.orderInfo.beizhu = order.beizhu
            this.orderInfo.back_time = order.back_time
          }
        })
      },

      backCar(){
        myPost(urlBackCar,{order_id:this.orderInfo.order_id,back_time:this.orderInfo.back_time}).then(res=>{
          if(res.status){
            this.backDialogFormVisible = false;
            this.$message.success(res.msg);
            this.getRecords()
          }
        })
      },

      closeBackDialog(){
        this.backDialogFormVisible= false
        Object.assign(this.$data.orderInfo,this.$options.data().orderInfo)
      },

      getAllUnitName(){
        myGet(urlUnitNameLst).then(res=>{
          if(res.status){
            this.unitList = []
            res.data.records.forEach(unit=>{
              this.unitList.push({
                'id':unit.id,
                'unit_name':unit.unit_name
              })
            })
          }
        })
      },

      getFreeCar(){
        myGet(urlFreeCarLst).then(res=>{
          this.freeCarLst = []
          let cars = res.data.records.forEach(car=>{
            this.freeCarLst.push({
              'id':car.id,
              'car_no':car.car_no,
            })
          })
        })
      },
      getAllCar(){
        myGet(urlAllCarLst).then(res=>{
          this.allCarLst = []
          let cars = res.data.records.forEach(car=>{
            this.allCarLst.push({
              'id':car.id,
              'car_no':car.car_no,
            })
          })
        })
      },

      handleEdit(index,row){
        this.carDialogFormVisible = true
        this.isAdd = false
        let id = row.id
        this.getAllUnitName()
        this.getAllCar()
        Object.assign(this.$data.form,this.$options.data().form)
        myGet(urlAdvertDetail,{id}).then(res=>{
          if(res.status){
            let order = res.data.records;
            this.form.order_id = order.id
            this.form.rent_unit_id = order.rent_unit_id
            this.form.rent_time = order.rent_time
            this.form.back_time = order.back_time
            this.form.use_way = order.use_way
            this.form.beizhu = order.beizhu
            order.car_ids.split(',').forEach(item=>{
              this.form.select_car_ids.push(parseInt(item))
            })
          }
        })
      },

      openAddDialog(){
        this.isAdd = true
        this.carDialogFormVisible= true
        Object.assign(this.$data.form,this.$options.data().form)
        this.getAllUnitName()
        this.getFreeCar()
      },
      closeAddDialog(){
        this.isAdd = true
        Object.assign(this.$data.form,this.$options.data().form)
        this.carDialogFormVisible= false
        this.freeCarLst = []
        this.allCarLst = []
        this.unitList = []
      },


      onSubmit() {
        this.carDialogFormVisible = true;
        myPost(urlAdvertAdd,this.form).then(res=>{
          if(res.status){
            this.carDialogFormVisible = false;
            this.$message.success(res.msg);
            this.getRecords()
          }
        })
      },

      handleSelectionChange(val) {
        this.selectId = [];
        val.forEach(item=>{
          this.selectId.push(item.id)
        })
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val
        this.pagination.page = 1
        this.getRecords()
      },
      handleCurrentChange(val) {
        this.pagination.page  = val
        this.getRecords();
      },

      reload(){
        Object.assign(this.$data.query,this.$options.data().query)
        Object.assign(this.$data.pagination,this.$options.data().pagination)
        this.getRecords()
      },

      queryRecords(){
        Object.assign(this.$data.pagination,this.$options.data().pagination)
        this.getRecords()
      },

      getRecords(){
        this.listLoading = true
        const params = Object.assign(this.query,this.pagination)
        myGet(urlAdvertLst,params).then(res=>{
          this.listLoading = false
          if(res.status){
            this.list = res.data.records
            this.pagination.total = res.data.total
          }
        })
      },


      handleDelete(index,row){
        this.$confirm('确定要取消吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let id = row.id;
          myGet(urlAdvertDel,{id}).then(res=>{
            if(res.status){
              this.$message.success(res.msg)
              this.getRecords()
            }
          })
        });
      },
    },

    mounted() {
      this.getRecords()
      this.getAllCar()
      this.getAllUnitName()
    },
}
</script>

<style>

.upLoadShow .el-upload {
  width: 10rem !important;
  height: 10rem !important;
  line-height: 10rem !important;
}

/*当upLoadHide为true时，启用如下样式，即缩略图的样式，若为false则不启用该样式*/
.upLoadHide .el-upload-list--picture-card .el-upload-list__item {
  width: 10rem !important;
  height: 10rem !important;
  line-height: 10rem !important;
}
/*当upLoadHide为true时，启用如下样式，即上传框的样式，若为false则不启用该样式*/
.upLoadHide .el-upload {
  display: none;
}


.table-img{
    width: 50px;
    height: 50px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
